<template>
  <div class="loading-overlay">
    <div class="loading-container">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="shadow"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, reactive, onMounted } from 'vue'
</script>

<style scoped lang="less">
.loading-overlay {
  /* 全屏蒙层 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 禁止点击后面内容 */
  z-index: 9999;
}

.loading-container {
  position: relative;
  pointer-events: auto; /* 允许点击加载组件本身 */
  .loading {
    animation: rotate 2.5s cubic-bezier(0.75, 0, 0.5, 1) infinite;
  }
  .loading span{
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    background-color: #ff8f92;
    border: 1px solid #ff8f92;
    border-radius: 100%;
  }
  .loading span:nth-child(1){
    transform: translate(-28px,-28px);
    /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
    animation: animate1 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
  }
  .loading span:nth-child(2){
    transform: translate(28px,-28px);
    /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
    animation: animate2 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
  }
  .loading span:nth-child(3){
    position: relative;
    border-radius: 0;
    transform: scale(0.98) rotate(-45deg);
    /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
    animation: animate3 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
  }
  /* 阴影部分 */
  .shadow{
    position: relative;
    width: 100px;
    height: 20px;
    background-color: #d9d9d9;
    border-radius: 50%;
    top: 50px;
    animation: shadow 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
  }

  /* 定义动画 */
  /* 心形 左圆 */
  @keyframes animate1 {
    60%{
      transform: scale(0.4);
    }
  }
  /* 心形 右圆 */
  @keyframes animate2 {
    40%{
      transform: scale(0.4);
    }
  }
  /* 心形 中间部分 */
  @keyframes animate3 {
    50%{
      border-radius: 100%;
      transform: scale(0.5) rotate(-45deg);
    }
    100%{
      transform: scale(0.98) rotate(-45deg);
    }
  }
  /* 再加个心形整体的旋转动画 */
  @keyframes rotate {
    50%{
      transform: rotate(360deg);
    }
    100%{
      transform: rotate(720deg);
    }
  }
  /* 阴影动画 */
  @keyframes shadow {
    50%{
      background-color: #f2f2f2;
      transform: scale(0.5);
    }
  }
}
</style>
